<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级菜单</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .menu{
            width: 200px;
            margin: 20px;
            background: rgb(93, 126, 158);
            color: white;
            text-align: center;
        }
        .title{
            font-size: 18px;
            background: #369;
            padding: 5px 0px;
        }
        .city>li{
            height: 20px;
            line-height: 20px;
            cursor: pointer;
            padding: 5px 0px;
            position: relative;
        }
        .city>li:hover .district{
            display: block;
        }
        .district{
            width: 200px;
            background: rgb(93, 126, 158);
            position: absolute;
            right: -200px;
            top: 0px;
            display: none;
        }
        .district>li{
            height: 20px;
            line-height: 20px;
            cursor: pointer;
            padding: 5px 0px;
        }
    </style>
</head>
<body>
    <div class="menu">
        <!-- <div class="province">
            <div class="title">江苏</div>
            <ul class="city">
                <li>南京
                    <ul class="district">
                        <li>秦淮区</li>
                        <li>鼓楼区</li>
                    </ul>
                </li>
                <li>苏州</li>
            </ul>
            <div class="title">浙江</div>
            <ul class="city">
                <li>杭州</li>
                <li>温州</li>
            </ul>
        </div> -->
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        let data = [] //定义一个数组，用于保存数据

        //请求数据
        $.get('./data/city.json',res=>{
            //筛选出所有的省份
            data = res.filter(r=>r.pid===0)
            //循环所有的省份，给省份添加城市
            data.forEach(r => {
                //给每个省份，添加自己的城市
                r.citys = res.filter(r2 => r2.pid===r.id)
                //循环所有的城市，给城市添加区县
                r.citys.forEach(r3=>{
                    //给每个城市，添加自己的区县
                    r3.districts = res.filter(r4 => r4.pid===r3.id)
                })
            });
            // console.log(data);

            //在页面中加载数据
            data.forEach(r=>{
                //循环出所有的省份
                let province = $('<div class="province"/>')
                let title = $('<div class="title"/>').html(r.name)
                province.append(title)
                let city = $('<ul class="city"/>')
                //循环出每个省份的城市
                r.citys.forEach(r2=>{
                    let li1 = $('<li/>').html(r2.name)
                    let ul1 = $('<ul class="district"/>')
                    li1.append(ul1)
                    //循环出每个城市的区县
                    r2.districts.forEach(r3=>{
                        let li2 = $('<li/>').html(r3.name)
                        ul1.append(li2)
                    })
                    city.append(li1)
                })
                province.append(city)
                $('.menu').append(province)
            })
        })
        
    </script>
</body>
</html>